<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
    <script type="text/javascript" src="js/jquery.maskedinput-1.1.4.pack.js"></script>
</h:head>
<h:body>
	<h:form id="formulario">
		<h:panelGrid columns="3">

			<h:outputLabel value="Data de Inicio" />
			<h:inputText id="dataInicio" value="#{reservasMB.reservas.checkInDateStr}" required="true" label="Data de Inicio"
				size="12" />
			<h:message for="dataInicio"   />

			<h:outputLabel value="Data de Fim" />
			<h:inputText id="dataFim" value="#{reservasMB.reservas.checkOutDateStr}" required="true" label="Data de Fim"
				size="12" />
			<h:message for="dataFim" />

			<h:outputLabel value="Cidade:" />
			<h:selectOneMenu id="cidade" value="#{reservasMB.reservas.codigoCidade}" >
  					<f:selectItems id="listaCidades" value="#{cidadeMB.listaCidades}" var="cidades" itemLabel="#{cidades.nomeCidade}" itemValue="#{cidades.codigo}"/> 
			</h:selectOneMenu> 
		     <h:message for="cidade" />

			<h:commandButton id="btPesquisar" value="Pesquisar" type="submit"
				action="#{reservasMB.pesquisarReservas}" />
				
			<h:commandButton id="btReservar" value="Reservar" type="submit" 
				action="#{reservasMB.efetuarReservas}" />
				
			<h:commandButton id="btCancela" value="Cancelar Reserva" type="submit" 
				action="#{reservasMB.cancelarReservas}" />

			<h:commandButton id="btnL" value="Limpar" type="button" immediate="true" onclick="limpar();"/>
			
		    <h:commandButton id="atualizaCidades" type="button" action="#{cidadeMB.buscar}" style="visibility:hidden"/>
		</h:panelGrid>

      <!-- Resultado da pesquisa -->
		<h:panelGrid rendered="#{not empty reservasMB.listaReservas}">
			<h:dataTable id="reservas" value="#{reservasMB.listaReservas}" var="reserva"
				title="Resultados da Pesquisa" border="1" rows="12">
				<h:column>
				     <f:facet name="header">
						<h:outputText value="Reserva" />
					</f:facet>
						<h:selectBooleanCheckbox id="check" value="#{reserva.checkReservar}"  >
						      <f:selectItem itemValue="true" itemLabel="" />
						</h:selectBooleanCheckbox>
				</h:column>
				<h:column>
					<f:facet name="header">
						<h:outputText value="Código do Hotel" />
					</f:facet>
					<h:outputText value="#{reserva.codigoHotel}" />
				</h:column>
				<h:column>
					<f:facet name="header">
						<h:outputText value="Nome Hotel" />
					</f:facet>
					<h:outputText value="#{reserva.nomeHotel}" />
				</h:column>
				<h:column>
					<f:facet name="header">
						<h:outputText value="Código da Cidade" />
					</f:facet>
					<h:outputText value="#{reserva.codigoCidade}" />
				</h:column>
				<h:column>
					<f:facet name="header">
						<h:outputText value="Cidade" />
					</f:facet>
					<h:outputText value="#{reserva.nomeCidade}" />
				</h:column>
				<h:column>
					<f:facet name="header">
						<h:outputText value="Data de Início" />
					</f:facet>
					<h:outputText value="#{reserva.checkInDateStr}" />
				</h:column>
				<h:column>
					<f:facet name="header">
						<h:outputText value="Data Fim" />
					</f:facet>
					<h:outputText value="#{reserva.checkOutDateStr}" />
				</h:column>
			</h:dataTable>
		</h:panelGrid>
	</h:form>
	<script type="text/javascript">
	// <![CDATA[
		jQuery(document).ready(function() {
			
			//coloca mascara nos campos datas
			$("#formulario\\:dataInicio").mask("99/99/9999");
			$("#formulario\\:dataFim").mask("99/99/9999");
			
			//carrega lista de cidades ao entrar na pagina
			if($("#formulario\\:cidade").size() <= 1 )
				$("#formulario\\:atualizaCidades").click();
		});
		
		function limpar(){
			$("#formulario\\:dataInicio").val("");
			$("#formulario\\:dataFim").val("");
			$("#formulario\\:cidade").val("");
		}
		// ]]>
	</script>
</h:body>
</html>



